<template>
  <el-dialog
    title="编辑嘞部门"
    :visible="isShow"
    width="50%"
    @close="handleClose"
    @open="handleOpen"
  >
    <!-- @close="$emit('update:isShow')"这个是关闭弹框的那个x号 -->
    <!-- 表单  rem在适配移动端，电脑端不适合使用 -->
    <el-form
      label-width="100px"
      :model="deptForm"
      :rules="deptFormRules"
      ref="deptFormRef"
    >
      <!-- placeholder="自定义"这个命令是在文本框中显示灰白字体 -->
      <el-form-item label="部门名称" prop="name">
        <el-input
          v-model="deptForm.name"
          placeholder="部门名称要求1-10个字符"
        />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="deptForm.code" placeholder="长度要求1-10个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="deptForm.manager"
          placeholder="请选择部门负责人"
          style="width: 90%"
        >
          <el-option
            v-for="obj in managerList"
            :key="obj.id"
            :label="obj.username"
            :value="obj.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          type="textarea"
          placeholder="0/300"
          v-model="deptForm.introduce"
          style="width: 90%"
        />
      </el-form-item>
    </el-form>
    <!-- 操作按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleEditDept"> 确 定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import {
  getManagerListAPI,
  getDepartDetailAPI,
  editDeptAPI,
} from "@/api/departments";
export default {
  name: "EditDept",
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    deptList: {
      type: Array,
      // 引用类型需要写成函数的格式，返回值才是默认值
      default: () => [], //这个必须是个函数然后再返回（箭头函数）
    },
    //接父对象
    item: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    //自定义校验name规则（就是这个校验添加部门，与编辑部门的的校验规则）
    const validateName = (rule, value, callback) => {
      // 在编辑的时候，部门名称无需与自己比较
      // 思路：从deptList中年排除自己，然后在比
      const isSame = this.deptList
        .filter((obj) => obj.id !== this.item.id) //filter()就是排除自己
        .some((item) => item.name === value);
      isSame ? callback(new Error(`【${value}】部门已经重复存在`)) : callback(); // 三元表达式
    };
    //自定义校验code规则
    const validateCode = (rule, value, callback) => {
      // 在编辑的时候，部门的编码无需与自己比较
      const isSame = this.deptList
        .filter((obj) => obj.id !== this.item.id)
        .some((item) => item.code === value);
      // 遍历数组，用每次拿到的部门对象名字和输入的名字比对
      isSame
        ? callback(new Error(`【${value}】部门编码已经重复存在`))
        : callback(); // 三元表达式
    };
    return {
      //部门列表 拿到部门详情，然后进行部门赋值
      deptForm: {
        name: "",
        code: "",
        manager: "",
        introduce: "",
      },
      // 部门表单校验规则 （需要借助后台返回的数据来进行判断部门是否冲突）
      deptFormRules: {
        name: [
          {
            //部门名称
            required: true, //显示部门表单的那个红色的星号
            message: "部门名称不能为空",
            trigger: ["change", "blur"],
          },
          {
            min: 1,
            max: 10,
            message: "部门名称要求1-10个字符",
            trigger: ["blur", "change"],
          },
          // 调用自定义校验函数
          { validator: validateName, trigger: "blur" },
        ],
        code: [
          {
            //部门编码
            required: true, //显示部门表单的那个红色的星号
            message: "部门编码不能为空",
            trigger: ["change", "blur"],
          },
          {
            min: 1,
            max: 10,
            message: "长度要求1-10个字符",
            trigger: ["blur", "change"],
          },
          // 调用自定义校验函数
          { validator: validateCode, trigger: "blur" },
        ],
        manager: [
          {
            //负责人
            required: true, //显示部门表单的那个红色的星号
            message: "部门负责人不能为空",
            trigger: "change",
          },
        ],
        introduce: [
          {
            //介绍
            required: true, //显示部门表单的那个红色的星号
            message: "部门介绍不能为空",
            trigger: ["change", "blur"],
          },
          {
            min: 1,
            max: 300,
            message: "部门介绍要求1-300个字符",
            trigger: ["blur", "change"],
          },
        ],
      },
      //负责人列表
      managerList: [],
    };
  },
  methods: {
    //编辑(修改)部门
    handleEditDept() {
      // console.log("456");//打印是否获取到部门
      // 整体校验
      this.$refs.deptFormRef.validate(async (valid) => {
        // 如果校验不通过，直接结束执行
        if (!valid) return;
        // console.log("555");// 获取到是否得到数据
        //发起新的请求
        await editDeptAPI(this.deptForm); //传入一个表单
        //关闭弹层
        this.handleClose();
        //获取部门列表
        // 通知子传父，父组件获取部门列表然后做回显数据
        this.$emit("edit-dept-success");
      });
    },
    //弹框打开时
    async handleOpen() {
      //请求部门详情
      const resp = await getDepartDetailAPI(this.item.id);
      //回显数据(原理：给v-model绑定的属性直接赋值)
      this.deptForm = resp.data; //点开对应的编辑会显示回显数据
      //如果获取过负责人列表，就不再获取
      if (this.managerList.length) return;
      //发送请求 进行解构
      const { data } = await getManagerListAPI();
      // 保存负责人列表
      this.managerList = data;
      this.$message.success("编辑成功");
    },
    //当关闭弹框时
    handleClose() {
      //触发自定义事件 ，通知父组件，关闭弹框，父组件用来sync修饰符，
      //会自动监听@update：isShow事件
      //关闭弹框（sync修饰符触发的自定义事件，并携带要更新的新值false）
      this.$emit("update:isShow", false);
      //重置表单
      this.$refs.deptFormRef.resetFields();
    },
  },
};
// 就是新增数据：首先让tree-tool子组件去访问父组件（就是子传父），然后
// 父组件接收数据 把数组传给add-dept字组件（就是父传子）
</script>
<style scoped>
.el-input {
  width: 90%;
}
</style>
